<template>
	<view class="cardetails">
		<view class="title"></view>
		<view class="main">
			<view class="table-data">
				<u-divider v-if="tableData.length === 0" class="no-data" bg-color="#eaf1ff">暂无数据</u-divider>
				<view class="data-box">
					<u-collapse :item-style="itemStyle">
						<u-collapse-item :title="item.item | timefilters" v-for="(item, index) in tableData" :key="index">
							<view class="data_main">
								<u-row>
									<u-col span="4">
										<view class="title-name">起点</view>
									</u-col>
									<u-col span="4">
										<view class="title-name">终点</view>
									</u-col>
									<u-col span="4">
										<view class="title-name">运输次数</view>
									</u-col>
								</u-row>
								<u-row v-for="(itm , ind) in item.data" :key="ind">
									<u-col span="4">
										<view class="text-name">{{itm.beginName}}</view>
									</u-col>
									<u-col span="4">
										<view class="text-name">{{itm.endName}}</view>
									</u-col>
									<u-col span="4">
										<view class="text-name">{{itm.count}}</view>
									</u-col>
								</u-row>
							</view>
						</u-collapse-item>
					</u-collapse>
				</view>
			</view>
		</view>

		<!-- 		<view class="main">
			<view class="table-data">
				<u-divider v-if="tableData.length === 0" class="no-data" bg-color="#eaf1ff">暂无数据</u-divider>
				<view class="data-box">
					<u-row class="data-wrap" v-for="(item, index) in tableData" :key="index">
						<u-col>
							<view class="data-item" style="text-align: left;" @tap="clickTableShow(index)">
								<text>时间：{{ item.item | timefilters }}</text>
								<u-icon :name="tableShow === index? 'arrow-down' : 'arrow-left'"></u-icon>
							</view>
							<view class="data_main" v-show="tableShow === index">
								<u-row>
									<u-col span="4">
										<view class="title-name">起点</view>
									</u-col>
									<u-col span="4">
										<view class="title-name">终点</view>
									</u-col>
									<u-col span="4">
										<view class="title-name">运输次数</view>
									</u-col>
								</u-row>
								<u-row v-for="(itm , ind) in item.data" :key="ind">
									<u-col span="4">
										<view class="text-name">{{itm.beginName}}</view>
									</u-col>
									<u-col span="4">
										<view class="text-name">{{itm.endName}}</view>
									</u-col>
									<u-col span="4">
										<view class="text-name">{{itm.count}}</view>
									</u-col>
								</u-row>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
		</view> -->

	</view>
</template>

<script>
	import {
		getReportData
	} from "@/api/dataReport.js"
	export default {
		data() {
			return {
				tableData: [],
				tableShow: false,
				formAgin: {},
				itemStyle: {
					// height: "80rpx"
				}
			};
		},
		onLoad(option) {
			this.formAgin = option
			this.getReportList()
		},
		filters: {
			timefilters(time) {
				var thisTime = new Date(time * 1000)
				return `${thisTime.getFullYear()}-${thisTime.getMonth()+1}-${thisTime.getDate()}`
			}
		},
		methods: {
			clickTableShow(index) {
				if (this.tableShow === index) {
					this.tableShow = 12345678962211
					return
				}
				this.tableShow = index
			},
			getReportList() {
				this.tableData = []
				getReportData(this.formAgin).then(res => {
					for (var item in res.result) {
						let map = {
							item,
							data: res.result[item]
						}
						if (res.result[item].length !== 0) {
							res.result[item].forEach(item => {
								this.cost += item.cost
							})
							this.tableData.push(map)
						}
					}
					console.log(this.tableData)
				})
				// console.log(this.formAgin)
			},
		}

	}
</script>

<style lang="scss">
	.table-data {
		margin-bottom: 130rpx;
		font-size: 30rpx;
		.data-box{
			padding: 0 20rpx;
		}
		.data-item {
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #dcdcdc;
			// padding: 20rpx 0rpx;
			font-size: 24rpx;
			font-weight: normal;
			font-stretch: normal;
			letter-spacing: 0px;
			height: 80rpx;
			line-height: 80rpx;
			box-sizing: border-box;
			padding: 0 20rpx;
			color: #111111;
		}

		.data_main {
			font-size: 27rpx;

			.u-row {
				padding: 10rpx 0;
				background-color: white;
				border-bottom: 1px solid #C0C0C0;
				height: 60rpx;
				text-align: center;
				&:first-child {
					color: #f3f3f3;
					background-color: #a5a5a5;
				}
			}

		}

		.singular {
			background-color: #eaf1ff;
		}

		.dual {
			background-color: #ffffff;
		}

		.data-details {
			font-size: 24rpx;
			font-weight: normal;
			font-stretch: normal;
			letter-spacing: 0px;
			color: #5c92ff;
		}

		.no-data {
			padding-top: 40rpx;
		}
	}
	.u-col{
		text-align: center !important;
	}
	.u-collapse-item{
		// height: 80rpx;
		
		border-bottom: 1px solid #dcdcdc;
	}
</style>
